<template>
	<view class="nav">
		<view :style="'height:'+status+'rpx;'+containerStyle"></view>
	
	<view v-if="isHome" class="headNav":style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;padding-left:20rpx;'">
		
		<text class="city">中部地区</text>
		<view style="flex:0.6">
			<navigator
			url="../../pages/search/index"
			:style="
			'height:' +
			menu.height*2+
			'rpx;line-height:'+
			menu.height*2+
			'rpx;margin-top:'+
			(menu.top*2-status)+
			'rpx;margin-left:32rpx;margin-right:;'+
			(menu.width*2+24)+
			'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'
			"
			
			>
				<text class="search-text">找医院</text>
			</navigator>
		</view>
		
		
		
	</view>
	
		<view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages>1" src="../../static/resource/navbar/ic_back.png" mode=""></image>
				<image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image>
			</view>
			<view class="nav-title" v-if="titleText">
			<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">
				{{titleText}}
			</view>	
			</view>
			
		
	</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onBeforeMount,defineProps } from 'vue';
	const props=defineProps({
		background:{
			type:String,
			default:'rgba(255,255,255,1)'
		},
		color:{
			type:String,
			default:'rgba(0,0,0,1)'
		},
		fontSize:{
		type:String,
			default:32
		},
		icoWidth:{
			type:String,
			default:116
		},
		iconHeight:{
			type:String,
			default:38
		},
		titleText:{
			type:String,
			default:''
		},
		isHome:{
			type:Boolean,
			default:false
		}
		
	})
	onBeforeMount(()=>{
		setNavSize()
		setStyle()
		// const pages = getCurrentPages().length;
		//     console.log('当前页面栈的长度:', pages);
	})
	//状态栏高度
	const status=ref(0)
	//内容高度
	const navHeight=ref(0)
	//背景颜色
	const containerStyle=ref('')
	//字体样式
	const textStyle=ref('')
	//图标的样式
	const iconStyle=ref('')
	//页面栈的数量
	const pages=ref(getCurrentPages().length)
	console.log(pages.value,'page')
	
	//获取胶囊的位置
	const menu=reactive(uni.getMenuButtonBoundingClientRect())
	
	
	//计算状态栏高度
	const setNavSize=()=>{
		const {system,statusBarHeight}=uni.getSystemInfoSync()
		status.value=statusBarHeight*2
		// console.log(res)
		const isiOS=system.indexOf('iOS')>-1
		if(!isiOS){
			navHeight.value=96
		}else{
			navHeight.value=88
			
			
		}
		// console.log(res)	
	}
	//样式设置
	const setStyle=()=>{
	containerStyle.value=['background:'+props.background].join(";")	
		textStyle.value=['color:'+props.color,'font-size'+props.fontSize+'rpx'].join(';')
		iconStyle.value=['width:'+props.icoWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')
		
	}
	const backOrHome=()=>{
		if(pages.value>1){
			uni.navigateBack();
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
	
</script>

<style>
	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.back-icon{
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left:20rpx ;
	}
	.back-icon image{
		width: 64rpx;
		height: 64rpx;	
	}
	.navbar{
		position:relative;
	}
	.nav-title{
	position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav{
		display: flex;
		
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
	.search-text {
	    display: inline-block;
	    padding-left: 30rpx;
	    color: #bbbbbb;
	    font-size: 26rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 23rpx;
	}
	
	
	</style>
